{% extends "base.html" %}

{% block headerext %}
	<style type="text/css">
	label{ min-width:100px; display:inline-block; vertical-align: top;}
	</style>
{% endblock %}

{% block headerblock %}
<div style="float:right">
{{ greeting }} |
<a href="/settings">Update recorded RSS feeds</a> | 
<!--logout url --><a href="{{ url }}">{{ url_linktext }}</a>
</div>
{% endblock %}

{% block bodyblock %}
		<div class="span-16">
			<h1>Current Feeds</h1>
		{% for feed in feeds %}
			<h3>Name: {{ feed.name }}</h3>
			<ul>
			<li>URL: {{ feed.url }}</li>
			<li>Added By: {% if feed.added %} {{ feed.added.nickname }} {% else %} unknown {% endif %}</li>
			<li>Added: {{ feed.date }}</li>
			</ul>
		{% endfor %}
		</div>
		<div class="span-8 last">
		<h2>Add new xml feed</h3>
		<p>(<small>Leave name/desc blank for default values</small>)</p>
	    <form id="form" action="/feeds" method="post">
				{{csrf_token }}
				<div id="message">&nbsp;</div>
				<div><label for="id_name">Name</label>{{ feedForm.name }}</div>
				<div><label for="id_url">Url&nbsp;</label>{{ feedForm.url }} <a id="check_url" href="#">Check</a></div>
				<div><label for="id_desc">Desc</label>{{ feedForm.desc }}</div>
			<div><input type="submit" value="Add Feed"></div>
	    </form>
		</div>
		<script type="text/javascript">
		<!--
			var checkURL = function() { 
				$('#message').html('loading...');
				$.ajax({
					headers: { "Accept": "application/vnd.plasmo-com.rss\+json"},
				    type: "GET",
					data: {url: $("#id_url").val()},
				    url: "/check",
					statusCode: { 
						400: function() { 
							alert('bad request');
						},
						404: function() { 
							alert('page not found');
						}
					},
					error: function(jqXHR, textStatus, errorThrown)
					{
						console.log(jqXHR);
						if(jqXHR.responseText != "")
							alert(jqXHR.responseText);
						else
							alert(textStatus);
						console.log(errorThrown);
					},
				    success: function (data) {
						try {
							$('#message').html('');
							if($('#id_name').val()=="")
								$('#id_name').val(data.name)
							if($('#id_desc').val()=="")
								$('#id_desc').val(data.desc)

						} catch (e) { console.log(e); $('#message').html('Problem with data.');}
				    },
				    dataType: "json"
				});
			};
			$(function() {
				$("#check_url").click(function(evt) { 
					evt.preventDefault();
					checkURL(); 
				});
				$("#id_url").change(function() { 
					checkURL(); 
				}); 
				
				$("#form").submit(function(evt) {
					$f = $(this);
					var url = $f.find("input[name=url]").val();
					if(url=="")
					{
						alert("you must enter a url"); 
						return false;
					}
					var params = {url: url};
					if($('#id_name').val()!="")
						params[$('#id_name').attr('name')] = $('#id_name').val()
					if($('#id_desc').val()!="")
						params[$('#id_desc').attr('name')] = $('#id_desc').val()
					
					$.ajax({
						headers: { "Accept": "application/vnd.plasmo-com.rss\+json"},
						type: 'POST',
						statusCode: { 
							201: function() { 
								alert("Feed Created")
							}
						},
						success: function(data) {
							console.log(data);
							alert(data); 
							if(data.status && data.status == "success")
							{
								window.location.reload();
							}
							else
							{	
								alert(data.message);
								return false;
							}
							
						}
						dataType = 'json'
					}
					return false;
				});
			});
		//-->
		</script>
{% endblock %}